<template>
  <div class="bodys">
    <div class="Lazyloading">
      <div class="tujian"></div>
      <van-list v-model="loading" :finished="finished">
        <!--    finished-text="没有更多了" -->
        <!-- v-for="item in list" :key="item" -->
        <div class="van-lists">
          <div class="waterfall">
            <div class="waterfall-left">
              <div
                class="waterfall-right-item"
                v-for="(item, index) in waterRight"
                :key="index"
                @click="toparticulars(item.id)"
              >
                <!-- v-for="(ele, index) in waterRight"
                :key="index" -->
                <van-image fit="contain" :src="item.picUrl" />
                <ul class="tltlest">
                  <li>
                    <div class="Prices">
                      <span class="text"> 价格:</span>
                      <span class="Price"> ￥{{ item.retailPrice }}</span>
                    </div>
                    <span class="Hots" v-show="item.isHot">热</span>
                    <span class="Hots" v-show="item.isNew">新</span>
                  </li>

                  <li>
                    <span> {{ item.brief }}</span>
                  </li>
                  <li>
                    <span> {{ item.name }}</span>
                  </li>
                </ul>
              </div>
            </div>

            <div class="waterfall-right">
              <div
                class="waterfall-right-item"
                v-for="(item, index) in waterLeft"
                :key="index"
                @click="toparticulars(item.id)"
              >
                <!-- v-for="(ele, index) in waterRight"
                :key="index" -->
                <van-image fit="contain" :src="item.picUrl" />
                <ul class="tltlest">
                  <li>
                    <div class="Prices">
                      <span class="text"> 价格:</span>
                      <span class="Price"> ￥{{ item.retailPrice }}</span>
                    </div>
                    <span class="Hots" v-show="item.isHot">热</span>
                    <span class="Hots" v-show="item.isNew">新</span>
                  </li>

                  <li>
                    <span> {{ item.brief }}</span>
                  </li>
                  <li>
                    <span> {{ item.name }}</span>
                  </li>
                </ul>
              </div>
              <!-- 第二个 -->
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<style lang="less" scoped>
// .bodys {

//   // height: 100%;
//   // padding-bottom: 40px;
// }
.manst {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.msa {
  height: 200px;
}
.tujian {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: snow;
}
.Lazyloading {
  .waterfall {
    width: 100%;
    display: flex;
    .waterfall-left,
    .waterfall-right {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .waterfall-left-item,
    .waterfall-right-item {
      width: 100%;
      height: auto;
      overflow: hidden;
      border-radius: 5px;
      height: auto;
      .centered();
      font-size: 14px;
      .tltlest {
        width: 95%;
        margin: 0 auto;
        padding-bottom: 5px;
        // border: 1px solid #000;
        & li:nth-child(1) {
          margin-bottom: 2px;
          display: flex;
          justify-content: space-between;

          .Prices {
            position: relative;
            width: 110px;
            // border: 1px solid #000;
            span {
              position: absolute;
              bottom: 0px;
              width: 70px;
            }
            .text {
              font-size: 16px;
              font-display: 500;
              color: rgb(53, 53, 53);
            }
            .Price {
              font-size: 15px;
              color: rgb(248, 82, 82);
              right: 0px;
            }
          }

          .Hots {
            // border: 1px solid #000;
            padding-top: 2px;
            padding-bottom: 2px;
            padding-right: 2px;
            padding-left: 2px;
            display: block;
            color: rgb(255, 255, 255);
            background-color: rgb(243, 127, 127);
            border-radius: 3px;
          }
        }
        & li:nth-child(2) {
          font-size: 13px;
          padding-bottom: 3px;
          padding-top: 3px;
        }
      }
    }
  }
}
</style>


<script>
import { Toast } from "vant";
import { Lazyload } from "vant";
import { List } from "vant";
import { Image } from "vant";
export default {
  inject: ["reload"],
  name: "Lazyloading",
  props: ["waterData"],
  components: {
    [List.name]: List,
    [Image.name]: Image,
    [Lazyload.name]: Lazyload,
    [Toast.name]: Toast,
    //  [Cell.name]: Cell,
    //     [CellGroup.name]: Cell,
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      waterInfo: [],
      waterLeft: [],
      waterRight: [],
    };
  },
  watch: {
    // 使用监听的方式，监听数据的变化
    waterData(val) {
      this.waterInfo = [];
      this.$nextTick(() => {});
      this.waterInfo = val;
      // console.log(val);
      this.gather();
    },
  },
  created() {
    // this.gather();
  },
  mounted() {
    // this.getData();
  },
  methods: {
    // 进行数据的聚合
    gather() {
      this.waterRight = [];
      this.waterLeft = [];
      setTimeout(() => {
        this.waterInfo.forEach((item, index) => {
          if (index % 2 == 0) {
            this.waterRight.push(item);
          } else {
            this.waterLeft.push(item);
          }
        });
        this.loading = false;

        if (this.waterInfo.length == this.waterInfo.length) {
          this.finished = true;
        }
      }, 1000);
    },
    toparticulars(e) {
      // console.log(e)
      this.$router.push({
        path: "/details",

        query: { userId: e },
      });

    },
  },
};
</script>